<template>
    <div class="box">
        <navigationBar :bgType="3" :backType="2" navigationTitle="动态" />
        <view class="none"></view>
        <view class="sticky">
            <view class="top card">
                <view class="like" @click="goOn('like')">
                    <image
                        class="icon"
                        src="/static/static/technician/joinUs/like.png"
                        mode="scaleToFill"
                    />
                    <text>收获的点赞</text>
                </view>
                <view class="comment" @click="goOn('comment')">
                    <image
                        class="icon"
                        src="/static/static/technician/joinUs/comment.png"
                        mode="scaleToFill"
                    />
                    <text>收获的评论</text>
                </view>
            </view>

            <view class="category">
                <view class="wrap-order-status flex" :style="'top: 0px;'">
                    <block v-for="(item, index) in tab_list" :key="index">
                        <view
                            class="status-item flex align-center just-center"
                            @click="onTab(index)"
                        >
                            <view :class="{ active: item.status === status }">
                                {{ item.title }}
                            </view>
                        </view>
                    </block>
                </view>
            </view>
        </view>

        <view class="list">
            <block v-for="(item, index) in myDynamicList" :key="index">
                <view class="items" @click="onDetail(item)">
                    <image :src="item.image" mode="scaleToFill" />
                    <view class="titles">
                        {{ item.name }}
                    </view>
                    <view class="flex align-center function">
                        <view class="edit">
                            <image
                                class="bIcon"
                                src="/static/static/technician/joinUs/editDy.png"
                                mode="scaleToFill"
                            />
                            <text>编辑</text>
                        </view>
                        <view class="del" @click.stop="onDel(item)">
                            <image
                                class="bIcon"
                                src="/static/static/technician/joinUs/delete.png"
                                mode="scaleToFill"
                            />
                            <text>删除</text>
                        </view>
                    </view>
                </view>
            </block>
            <emptyData v-if="myDynamicList.length === 0" />
        </view>

        <view class="mask" @click="showModal = false" v-if="showModal"></view>
        <view class="modal card flex column align-center" v-if="showModal">
            <view class="title">温馨提示</view>
            <view class="content">
                是否确认删除该动态，删除后将无法恢复 请谨慎操作！
            </view>
            <view class="btns flex just-around align-center">
                <view class="btn cancel" @click="showModal = false">
                    取消
                </view>
                <view class="btn del" @click="onDelete"> 确定删除 </view>
            </view>
        </view>
    </div>
</template>

<script>
import { getCategoryList, deleteDynamic } from "@/API/API/recruit.js";
export default {
    data() {
        return {
            tab_list: [
                {
                    title: "审核中",
                    status: 0,
                },
                {
                    title: "已发布",
                    status: 1,
                },
                {
                    title: "已驳回",
                    status: 2,
                },
            ],

            status: 0,

            myDynamicList: [],
            page: 1,
            lat: 0,
            lng: 0,
            total: 0,

            showModal: false,
            item: {},
        };
    },

    mounted() {
        uni.getLocation({
            type: "gcj02",
            success: (res) => {
                this.lat = res.latitude;
                this.lng = res.longitude;
            },
        });
        this.getList();
    },

    onReachBottom() {
        if (this.total <= this.myDynamicList.length) return;
        this.page++;
        this.getList();
    },

    methods: {
        getList() {
            getCategoryList({
                page: this.page,
                type: 3,
                cate_id: this.statusID,
                lat: this.lat,
                lng: this.lng,
                status: this.status,
            }).then((res) => {
                this.myDynamicList.push(...res.data.list.data);
                this.total = res.data.list.total;
            });
        },
        onTab(index) {
            this.status = index;
            this.page = 1;
            this.myDynamicList = [];
            this.getList();
        },
        onDel(item) {
            this.showModal = true;
            this.item = item;
        },
        onDelete() {
            this.showModal = false;
            deleteDynamic({ dynamic_id: this.item.id }).then((res) => {
                uni.showToast({ title: res.msg, icon: "none" });
                this.myDynamicList = [];
                this.page = 1;
                this.getList();
            });
        },
        onDetail(item) {
            uni.navigateTo({
                url: `/subPages/technician/recruit/dynamicDetails?dynamic_id=${
                    item.id
                }&lat=${this.lat}&lng=${this.lng}&isMine=1&status=${
                    this.tab_list[this.status].status
                }`,
            });
        },
        goOn(type) {
            uni.navigateTo({
                url: "/subPages/technician/recruit/Received?type=" + type,
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.box {
    width: 100vw;
    padding: 0 25rpx;
    box-sizing: border-box;
}
.card {
    padding: 28rpx 15rpx;
    background-color: white;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
}
.list {
    padding: 10rpx 0 80rpx 0;
    box-sizing: border-box;
    width: 100%;
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
    .items {
        width: calc(50% - 20rpx);
        border-radius: 20rpx;
        margin: 10rpx;
        padding: 0 0 20rpx 0;
        background: white;
        box-sizing: border-box;
        .titles {
            padding: 20rpx 15rpx;
        }
        .function {
            padding: 0 20rpx;
        }
        image {
            width: 100%;
            height: 320rpx;
        }
        .function {
            margin-top: 20rpx;
            justify-content: end;
            font-size: 26rpx;
            color: #b0b0b0;
            .edit {
                margin-right: 20rpx;
                .bIcon {
                    width: 24rpx;
                    height: 24rpx;
                    margin-right: 10rpx;
                }
            }
            .del {
                .bIcon {
                    width: 24rpx;
                    height: 24rpx;
                    margin-right: 10rpx;
                }
            }
        }
    }
}
.title {
    padding: 20rpx 0;
    width: 100%;
    font-size: 28rpx;
    color: #333333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
image {
    width: 100%;
    border-radius: 20rpx 20rpx 0 0;
}
.top {
    display: flex;
    justify-content: space-around;
    font-size: 28rpx;
    .like,
    .comment {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .icon {
        width: 86rpx;
        height: 86rpx;
        margin-bottom: 20rpx;
    }
}
.wrap-order-status {
    position: sticky;
    left: 0;
    width: 100%;
    overflow: hidden;
    height: 100rpx;
    background: white;
    flex-wrap: wrap;

    .status-item {
        flex: 1;
        height: 100rpx;
        overflow: hidden;

        > view {
            display: inline-block;
            height: 100rpx !important;
            line-height: 100rpx;
            box-sizing: border-box;
            border-bottom: 6rpx solid white;
        }

        .active {
            border-color: $theme-color;
        }
    }
}
.none {
    width: 100%;
    height: 15rpx;
    position: sticky;
    top: 0;
    z-index: 10;
    background: #f6f6f6;
}
.sticky {
    position: sticky;
    top: 15rpx;
    z-index: 10;
    background: #f6f6f6;
}

.mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
}
.modal {
    width: 80%;
    height: 300rpx;
    border-radius: 20rpx;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    text-align: center;
    .title {
        font-size: 36rpx;
        color: #333333;
        font-weight: bold;
    }
    .content {
        width: 82%;
        font-size: 28rpx;
        color: #333333;
        line-height: 1.5;
        margin: 30rpx 0 60rpx 0;
    }
    .btns {
        width: 100%;
        color: #333333;
        font-size: 28rpx;
        .cancel {
            width: 150rpx;
            background: #ececec;
            color: #666666;
            padding: 20rpx 30rpx;
            border-radius: 30rpx;
        }
        .del {
            width: 150rpx;
            background: $grad-theme-color;
            color: #fff;
            padding: 20rpx 30rpx;
            border-radius: 30rpx;
        }
    }
}
</style>